import Head from 'next/head';
import RootPropTable from '../../../components/prop-tables/RootPropTable';
import EnableExample from '../../../examples/enable-sticky-header';

<Head>
  <title>
    Sticky Header/Footer Feature Guide - Material React Table V1 Docs
  </title>
  <meta
    name="description"
    content="How to use and customize the sticky header feature in Material React Table"
  />
</Head>

## Sticky Header and Footer Feature Guide

The sticky header and footer feature allows you to keep the header and footer of the table visible while scrolling through the table. This is useful when you have a large table and want to keep the header and footer visible at all times.

### Relevant Props

<RootPropTable
  onlyProps={new Set(['enableStickyHeader', 'enableStickyFooter'])}
/>

### Enable Sticky Header

Enabling the sticky header is as simple as setting the `enableStickyHeader` prop to `true`. This will make the header of the table stick to the top and remain visible while scrolling through the table.

When the sticky header is enabled, you will probably also want to give the table a maxHeight so that the table can scroll vertically and keep the header visible. You can do this by styling the table container with the `muiTableContainerProps` prop.

> If no maxHeight is specified, the table container will default to a `100vh` maxHeight when `enableStickyHeader` is enabled.

```tsx
<MaterialReactTable
  columns={columns}
  data={data}
  enableStickyHeader
  muiTableContainerProps={{ sx: { maxHeight: '500px' } }}
/>
```

### Enable Sticky Footer

Similarly, enabling the sticky footer is as simple as setting the `enableStickyFooter` prop to `true`. This will make the footer of the table stick to the bottom of the table and always be visible, even before the table is scrolled to the bottom.

```tsx
<MaterialReactTable columns={columns} data={data} enableStickyFooter />
```

### Enable Sticky Header and Footer Demo

<EnableExample />

View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/styling-sticky-header-examples)**
